<template>
	<view class="contract">
		<p-navbar title="执行详情"></p-navbar>
		<view>
			<view class="implement" style="margin-bottom: 50rpx;">
				<view class="implement1">
					<view class="implement1-item1">
						<view class="">
							追踪策略
							<text v-if="type.orderType!='1'" style="padding-left: 15rpx;">{{type.createTime}}</text>
							<text v-else style="padding-left: 15rpx;">{{str(type.createTime)}} 至 {{str(type.finishTime)}}</text>
							</view>
						<view class="">
							订单编号
							<text style="padding-left: 15rpx;">{{type.orderCode}}</text>
							</view>
					</view>
					<view class="implement1-item2">{{type.orderType=='0'?'执行中':'已结束'}}</view>
				</view>
				<view class="implement2">
					<view class="implement2-title">
						<!-- <view class="">
							
						</view> -->
						Huobi<text class="text">({{cases(type.baseCurrency)}}/{{cases(type.quoteCurrency)}})</text>
					</view>
					<view class="implement2-flex">
						<view class="">
							<view class="flex-item1">{{pinter(type.totalAmount)}}</view>
							<view class="text" style="font-weight: bold;">总投入 (USDT)</view>
						</view>
						<view class="">
							<view class="flex-item1">{{type.orderState=='-1'?'异常订单':strats[type.orderState-1]}}</view>
							<view class="text" style="text-align: right;">策略类型</view>
						</view>
					</view>
				</view>
				<view class="implement3">
					<view class="implement3-w">
						<view class="implement3-title">
							总收益 (USDT)</view>
						<view class="implement3-item" :class="{'color-rise':pinter(type.getProfitRespDto.totalEarnings)>=0}">{{pinter(type.getProfitRespDto.totalEarnings)}} <text>USDT</text></view>
					</view>
					<view class="implement3-w">
						<view class="implement3-title" style="text-align: right;">总收益率</view>
						<view class="implement3-item" :class="{'color-rise':pinter(type.getProfitRespDto.totalEarningsRate*100)>=0}">{{pinter(type.getProfitRespDto.totalEarningsRate*100)}} <text>%</text></view>
					</view>
				</view>
				<!-- 策略详情 -->
				<view class="implement3" >
					<view class="implement3-w" v-for="(itemes,indexes) in price" :key="indexes">
						<view class="implement3-title">
						 <image class="madel-image" v-if="indexes!=0" @tap="moadel(indexes)" src="../../static/doubt.png" mode="aspectFill"></image>
						  {{itemes.name}}
						</view>
						<view class="implement3-item buy">{{pinter(type[itemes.key])}}</view>
					</view>
				</view>
				<!-- 盈亏 -->
				<view class="implement3" >
					<view class="implement3-w" v-for="(itemes,indexes) in income" :key="indexes">
						<view class="implement3-title">
						{{itemes.name}}
						</view>
						<view class="implement3-item"  :class="{'color-rise':pinter(type.getProfitRespDto[itemes.key])>=0}">
						{{indexes=='2'?pinter(type.getProfitRespDto[itemes.key]*100,4)+'%':pinter(type.getProfitRespDto[itemes.key],4)}}
						</view>
						<view class="implement3-item"  :class="{'color-rise':pinter(type.getProfitRespDto[itemes.keys]*100)>=0}">
						{{pinter(type.getProfitRespDto[itemes.keys]*100)}} <text>%</text>
						</view>
					</view>
				</view>
				<!-- 买入卖出 -->
				<view class="implement3" >
					<view class="implement3-w" v-for="(item,index) in buy" :key="index">
						<view class="implement3-title">{{item.name}}</view>
						<view class="implement3-item buy">{{total[item.key]}}</view>
					</view>
				</view>
				<!-- 曲线图 -->
				<view class="ucharts" v-if="type.orderType!='1'">
					<view class="ucharts-item1">收益分析</view>
				</view>
				<view v-if="type.orderType!='1'" class="qiun-charts" style="margin: 20rpx 0rpx;">
					<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="canvasArea" id="canvasAreas" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}"
					 class="charts" disable-scroll=true @touchend="moveLineA" @touchstart="touchColumn" @touchmove="moveColumn"></canvas>
					<!--#endif-->
				</view>
				<!-- 止盈止损 -->
				<view class="loss">
					<view class="loss-title">策略相关</view>
					<view class="loss-gb">
						<view class="loes" v-for="(item,index) in loss" :key="index">
							<view class="implement3-w">
								<view class="implement3-title">{{item.name1}}</view>
								<view class="implement3-item buy">{{item.name1=='补仓跌幅'?par(type[item.key1]):item.start=='1'?pinters(tages(type[item.key1]))+' %':type[item.key1]}}</view>
							</view>
							<view class="implement3-w">
								<view class="implement3-title">{{item.name2}}</view>
								<view class="implement3-item buy" style="text-align: right;">{{item.name2=='倍投次数'?type.currentBuyCount+'/'+type[item.key2]:pinters(tages(type[item.key2]))+' %'}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 持仓 -->
				<view class="loss">
					<view class="loss-title">持仓</view>
					<view class="bill">
						<view class="bill-item" style="color: #CCCCCC;" v-for="(item,index) in position" :key="index">
							{{item}}
						</view>
					</view>
					<view class="bill" v-for="(item,index) in positionlist" :key="index">
						<view class="bill-item bill-text">{{cases(type.symbol)}}</view>
						<view class="bill-item bill-text">{{pinter(type.buyNum)}}</view> 
						<view class="bill-item bill-text" :class="{'color-rise':pinter(type.getProfitRespDto['floatEarningsRate']*100)>=0}">{{pinter(type.getProfitRespDto['floatEarningsRate']*100)}}%</view>
					</view>
				</view>
				<view class="loss" v-if="type.orderType!='1'">
					<view class="loss-title">成交记录</view>
					<comdetils :type.sync="type"/>
				</view>
			</view>
		</view>
		<view class="fooler-flex" v-if="type.orderType!='1'">
			<view class="flex-item flex  justify-center" @tap="nav(1)">
				设置参数
			</view>
			<view @tap="nav(0)" style="border-left: 1rpx solid rgba(153, 153, 153, 0.2);" class="flex-item flex justify-center">
				成交记录
			</view>
			<view @tap="nav(2)" style="border-left: 1rpx solid rgba(153, 153, 153, 0.2);" class="flex-item flex justify-center">
				执行历史
			</view>
		</view>
		<u-modal v-model="model" :title="content.name.title" :content="content.name.value" :show-cancel-button="event"
		 cancel-color="#A6ADB4" :title-style="modelstyle" :content-style="modelstyle" ></u-modal>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import {income,buy,price} from './details.js'
	import comdetils from './components/comdetails.vue'
	var canvaLineA = null;
	var _self;
	var lastMoveTime = null; //最后执行移动的时间戳
	var canvasObj = {};
	export default {
		components:{
			comdetils
		},
		data() {
			return {
				event:true,
				modelstyle:{//止盈 补仓提示计算格式
					"color":"#000000"
				},
				model:false,//提示 
				content: {name:{title:'',value:''}},//内容
				income:income,//盈亏
				price:price,//止盈 补仓价格
				buy:buy,//买入卖出
				strats: ['单次策略', '循环策略', '临时停止 ', '止盈停止 ', '清仓停止'],
				loss: [{
						name1: '首单额度',
						key1: 'oneAmount',
						name2: '倍投次数',
						key2: 'maxBuyOrderNum',
					},
					{
						name1: '止盈比例',
						key1: 'stopProfitRatio',
						name2: '盈利回调',
						key2: 'stopProfitCallbackRatio',
						start: '1'
					},
					{
						name1: '补仓跌幅',
						key1: 'supplyRatio',
						name2: '补仓回调',
						key2: 'supplyCallbackRatio',
						start: '1'
					},
				],
				position: ['币种', '数量', '浮动盈亏(USDT)'],
				positionlist: [{
						sysid: 'usdt',
						num: 950.00,
						bil: 100,
						loss: '--'
					}
				],
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				type: {}, //参数拘束
				line:{//曲线值
					num:[],
					time:[],
				},
				total:{},//累计买入卖出数量
				ascomplish:{},//盈亏 年率 收益
			};
		},
		// computed:
		computed: {
			str(){
				return t=>t.substring(0,10)
			},
			par() { //字符串转数组
				return t => {
					return this.tages(JSON.parse(t)[0].bigDecimal).toFixed(2) + ' %'
				}
			},
			pinter() {
				return t =>{					
						if(!t) return '0.0000'
						let data=this.util.decimal(t)
						if(data=='0.0000'){//shib 这种小币种 都是5位小数点
							return this.util.decimal(t,7)
						}else{
							return data;
						}
				}
			},
			pinters() {
				return t => this.util.decimal(t,2)
			},
			tages() { //乘于100
				return t => {
					if (!t) return '0.00'
					let data = Number(t * 100)
					return Number(data.toString().match(/^\d+(?:\.\d{0,2})?/))
				}
			},
			cases() { //转大写
				return t => {
					if(!t) return ''
					return t.toUpperCase();
				}
			},
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(670);
			this.cHeight = uni.upx2px(350);
			this.type = JSON.parse(this.$Route.query.type)//获取上页面获取的数据
			if(this.type.orderType!='1'){//已结束
			this.dealCurveByCode()	
			}
			this.getPriceByCode()//策略详情
			this.request({//买入卖出交易数
				url:'order/getOrderCount',
				params:{
					orderType:'0',
					symbol:this.type.symbol
				}
			}).then(res=>{
				this.total=res.data.data
			})
		},
		methods: {
			getPriceByCode(){//补仓 止盈价格
				this.request({
					url:'order/getPriceByCode',
					params:{
						orderCode:this.type.orderCode
					}
				}).then(res=>{
					let data=res.data.data
					data.buyPrices=data.buyPrice//拼接中已有改字段
					this.type=Object.assign(data,this.type)
				})
			},
			moadel(index){//提示模态框
			    this.content.name.title='提示'
				this.content.name.value=index==1?'上一次买入均价*(1-(补仓比例-补仓回调))':'持仓均价*(1+(止盈比例-止盈回调))'
				this.model=true
			},
			async dealCurveByCode(){
				this.request({
					url:'order/dealCurveByCode',
					params:{
						'orderCode':this.type.orderCode,//订单号
						'symbol':this.type.symbol,//交易对
					}
				}).then(res=>{
					console.log(res.data.data)
					let data=res.data.data
					
					if(data.length=='0'){//曲线为空 今天买单
 						this.line.num.push(this.util.decimal(this.type.getProfitRespDto.totalEarningsRate*100,0))
						this.line.time.push(this.type.createTime.substring(0,10))
					}else{
						for(let i=0;i<data.length;i++){
							if(data.length=='1'){//一条数据，有小数点 曲线会超出访问
								this.line.num.push(this.util.decimal(data[i].todayPrice,0))
							}else{
								this.line.num.push(this.pinters(data[i].todayPrice))
							}
							
							this.line.time.push(data[i].createTime.substring(0,10))
						}
					}
					console.log(this.line)
					this.showArea("canvasArea");//曲线图
				})
				
			},
			nav(e) {
				if (e == '1') {
					console.log(this.type.symbolConfig)
					console.log(this.type,'symbolConfig')
					if(this.type.symbolConfig!='1') return this.util.toast('你设置的类型无法修改')
					let data = ['oneAmount', 'maxBuyOrderNum', 'stopProfitRatio', 'stopProfitCallbackRatio', 'supplyRatio',
						'supplyCallbackRatio', 'symbol', 'id', 'quoteCurrency', 'baseCurrency', 'currentBuyCount'
					]
					let item = {} //传参数
					let value = {} //补仓比例
					for (let i = 0; i < data.length; i++) {
						if (data[i] == 'oneAmount') { //首单字段不一样
							item.amount = this.type[data[i]]
						} else if (data[i] == 'supplyRatio') { //转数组
							item[data[i]] = JSON.parse(this.type[data[i]])
						} else {
							item[data[i]] = this.type[data[i]]
						}
					}
					item.supplyRatio.forEach((ele, index) => {
						value[index + 1] = this.tages(ele.bigDecimal)
					})
					item.supplyRatio = item.supplyRatio[0].bigDecimal
					// return ;
					this.$Router.push({
						path: '/pages/transaction/param',
						query: {
							type: JSON.stringify(item),
							procp: JSON.stringify(value)
						} //item策略参数 value补仓参数
					})
				} else if(e=='2'){
					this.$Router.push({
						path: '/pages/transaction/history',
						query:{type:JSON.stringify(this.type)}
					})
				}else{
					this.$Router.push({
						path: '/pages/transaction/calendar',
						query:{type:JSON.stringify(this.type)}
					})
				}
			},
			touchColumn(e) {
				canvaLineA.scrollStart(e);
			},
			moveColumn(e) {
				canvaLineA.scroll(e);
			},
			moveLineA(e) {
				canvaLineA.scrollEnd(e);
				canvaLineA.touchLegend(e, {
					animation: true,
				});
				canvaLineA.showToolTip(e, {
					format: (item, category) => {
						this.date = category
						this.preson = item.data
						return '时间:' + category + '收益率:' + this.pinters(item.data)
					}
				});
			},
			showArea(canvasId) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: 'canvasArea',
					type: 'area',
					fontSize: 11,
					// padding: [0, 0, 0, 0],
					legend: {
						show: false,
					},
					background: '#F5F5F5',
					dataLabel: false,
					dataPointShape: false,
					pixelRatio: _self.pixelRatio,
					categories: Array.from(this.line.time), //this.line.time
					series: [{
						symbol: 'none',
						color: "#F3C31B",
						data: Array.from(this.line.num), //[10, 10, 20, 20, 10, 20]this.line.num
						index: 0,
						pointShape: "circle",
						show: true,
						type: "area",
					}, ],
					animation: true,
					enableScroll: true,
					xAxis: {
						type: 'grid',
						rotateLabel:true,
						labelCount:55,
						// disableGrid:false,
						gridColor: '#F3C31B',
						gridType: 'dash',
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						scrollShow: false, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						dashLength: 8,
						disableGrid: true,
						disabled: false,
						boundaryGap: 'justify', //两端不留白配置
						axisLine:false,
						fontColor:'#000000',
					},
					yAxis: {
						disableGrid: true,
						// disabled:true,
						gridType: 'dash',
						gridColor: '#F3C31B',
						dashLength: 8,
						splitNumber: 5,
						data:[
								{
								axisLine: false, //坐标轴轴线是否显示
								fontColor:'#000000',
								format: (val) => {
									return val.toFixed(2)
								}
								}
							],
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 0
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	$radio:12rpx;
	$color-opact: #999;
	.contract {
		padding: 50rpx 0rpx;
	}
	/deep/ .u-model{
	       height: auto;
	       overflow: hidden;
	       font-size: 16px;
	       background-color: $color-bgs;
		   border-radius: 15rpx;
	   }
	   /deep/ .u-mode-center-box{
	    min-width: 50px;
	    min-height: 50px;
	    display: block;
	    position: relative;
	    background-color: $color-bgs;
	}
	/deep/ .u-model__btn--hover{
		 background-color: $color-bgs;
	}
	.popup {

		/deep/ .uni-scroll-view-content {
			width: 100%;
			height: 100%;
			background-color: $color-bgs;
			text-align: center;
			line-height: 80rpx;
			padding: 20rpx 0rpx 0rpx;
		}

		.popup-border {
			border-bottom: 1rpx solid $border;
		}
		.show{
			color: $light-color;
		}
	}

	.implement {
		// background-image: url(../../static/goods.png);
		// @include background;
		padding: 40rpx 30rpx;

		.implement1 {
			@include flex;
			justify-content: space-between;
			border-bottom: 1rpx solid $border;
			padding: 5rpx 0rpx 10rpx;

			.implement1-item1 {
				font-size: 32rpx;
				font-weight: bold;
				.item2,
				text {
					line-height: 50rpx;
					font-size: 24rpx;
					color: $color-opact;
					font-weight: 400;
				}

			}

			.implement1-item2 {
				font-size: 30rpx;
				// font-family: PingFang;
				font-weight: bold;
				line-height: 50px;
				color: #1677FF;
			}
		}

		.implement2 {
			font-size: 30rpx;
			padding: 15rpx 0rpx;
			border-bottom: 1rpx solid $border;

			.implement2-title {
				line-height: 50rpx;
				font-weight: bold;
			}

			.text {
				color: $color-opact;
				font-size: 24rpx;
				padding-left: 10rpx;
				font-weight: 400;
			}

			.implement2-flex {
				@include flex;

				justify-content: space-between;

				.flex-item1 {
					line-height: 50rpx;
				}
			}
		}
		.madel-image{
			width: 20rpx;
			height: 20rpx;
			margin-right: 5rpx;
		}
		.implement3 {
			@include flex;
			padding: 15rpx 0rpx 15rpx;
			justify-content: space-between;
			color: $color-opact;
			font-size: 24rpx;
			border-bottom: 1rpx solid $border;

			// .implement3-w:nth-child(2) {
			// 	text-align: right;
			// }
			.implement3-w:nth-child(3) {
				text-align: right !important;
			}
			.implement3-item {
				line-height: 50rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: $color-fall;
				text{
					padding-left: 10rpx;
					font-size: 24rpx;
					font-weight: 100;
					color: $color-opact;
				}
				
			}
			
			.implement3-title {
				line-height: 50rpx;
				font-weight: bold;
			}
		}

	}
.buy{
				color: #000000 !important;
			}
	.loes {
		@include flex;
		padding: 15rpx 0rpx 15rpx;
		justify-content: space-between;
		color: $color-opact;
		font-size: 24rpx;

		// border-bottom: 1rpx solid $border;
		.implement3-item {
			line-height: 50rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: $color-white;
		}

		.implement3-title {
			line-height: 50rpx;
		}
	}

	.ucharts {
		@include flex;
		justify-content: space-between;
		margin-top: 30rpx;
		font-size: 32rpx;

		.ucharts-item2 {
			// color: $color-fu;
			font-size: 24rpx;
		}
	}

	.loss {
		padding: 30rpx 0rpx 0rpx;

		.loss-title {
			font-size: 32rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
		}

		.loss-gb {
			background-color: $color-bgs;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;

			.loss-item {
				@include flex;
				justify-content: space-between;
				font-size: 24rpx;

				.loss-grouy {
					padding: 20rpx 0rpx;

					.loss-text {
						color: $color-fu;
						line-height: 60rpx;
					}
				}

				.loss-grouy:nth-child(3) {
					text-align: right;
				}
			}
		}
	}

	.bill {
		@include flex;
		font-size: 26rpx;
		.bill-item {
			width: 34%;
			line-height: 60rpx;
			color: $color-fu;
		}

		.bill-text {
			color: #000000;
			font-weight: bold;
		}

		.bill-item:nth-child(2) {
			width: 33%;
		}

		.bill-item:nth-child(3) {
			text-align: right;
			width: 33%;
			color: $color-fall;
		}
	}

	.fooler-flex {
		position: fixed;
		bottom: 0rpx;
		background-color: $color-bgs;
		width: 100%;
		@include flex;
		justify-content: space-between;
		padding: 40rpx;
		font-size: 30rpx;
	}
	
</style>
